
<template>

	<div class="ris_p_menu_cont">
	    <div class="ris_cont ris_cont1">
	        <!--<div class="ris_cont_headNav">系统设置&gt;权限管理&gt;按钮权限设置</div>-->
	        <div class="ris_cont_headHint">收费项目关联设备({{eqpfeename}})<span class="ris_cont_headHint_btn" @click="return_topPage">返回</span></div>
	        <!--内容-->
	        <div class="ris_p_cont clear">
	            <!--左边-->
	            <div class="ris_p_cont_left">
	                <p class="ris_p_cont_left_head">已选设备名称</p>
	                <ul class="ris_btn_cont_left_ul3">
	                    <li v-for="item in message" v-if="item.status==1">
	                        <a href="#" class="" :code="item.code" @dblclick=" item.status==1?item.status=0:item.status=1">{{item.name}}</a>
	                    </li>
	                </ul>
	            </div>
	            <!--中间-->
	            <div class="ris_p_cont_center">
	                <button class="ris_btn_cont_center_right button">&gt;</button>
	                <button class="ris_btn_cont_center_left button">&lt;</button>
                <button class=" button" @click="save()">保存</button>
	            </div>
	            <!--右边-->
	            <div class="ris_p_cont_right">
	                <p class="ris_p_cont_right_head">可选设备名称</p>
	                <ul class="ris_btn_cont_right_ul3">
                    <li v-for="item in message" v-if="item.status==0">
                      <a href="#" class="" :code="item.code" @dblclick=" item.status==1?item.status=0:item.status=1">{{item.name}}</a>
                    </li>
	                </ul>
	            </div>
	        </div>
	    </div>
	</div>
</template>




<script>
	export default {
	    name: 'hello',
	    props:{
	        root:Object
	    },
	    created(){
	        //window.location.href = "http://139.217.17.69:8099/pos/authorize?client_id=b8bcd026b8bc47c88c785d77fe91a601&response_type=code&client_key=a482d714becb475da50b9bd1b7031a87&redirect_uri=http://10.0.2.46:8080/qytj/indexRedirect.html";

	    },
	    data () {
	      return {
          eqpfeename:window.localStorage.getItem("eqpfeename"),
          feeCode:window.localStorage.getItem("eqpfeecode"),
          eqptypeCode:window.localStorage.getItem("eqpfeetype"),
          message:[]
	      }
      },
    created(){
      this.$http.get(window.localStorage.url+"/feeItem/findbyeqpfeemap?feeCode="+this.feeCode+"&eqptypeCode="+this.eqptypeCode)
        .then(function (res) {
          this.message=res.data;
        });
      //
	    },
	    methods:{
			//返回按钮返回上一页
			return_topPage(){
        this.$router.push({name: 'FeeItemSetting'});
			},
        save(){
			  var _this=this;
			  var yy=[];
			  $.each(this.message,function(i,item){
			    if(item.status==1){
            yy.push(item.code);
          }
        });
          this.$http.get(window.localStorage.url+"/feeItem/inserteqpfeemap?feeCode="+this.feeCode+"&eqpCode="+yy.join(","))
            .then(function (res) {
              if(res.data="SUCCESS") {
                _this.$http.get(window.localStorage.url + "/feeItem/findbyeqpfeemap?feeCode=" + _this.feeCode + "&eqptypeCode=" + _this.eqptypeCode)
                  .then(function (res) {
                    _this.message = res.data;
                    $pg.popup({
                      text: "保存成功",//显示的文本
                      btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
                      btnBgColor: '#4f56a3',//按钮的颜色
                      btnToggle: {
                        btnDetermine: true,//确定按钮是否显示
                        btnCancel: false,//取消按钮是否显示
                      }
                    });
                  });
              }else{
                $pg.popup({
                  text: "系统繁忙，请稍后重试",//显示的文本
                  btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
                  btnBgColor: '#4f56a3',//按钮的颜色
                  btnToggle: {
                    btnDetermine: true,//确定按钮是否显示
                    btnCancel: false,//取消按钮是否显示
                  }
                });
              }
            });
        }


	    },
//	    beforeUpdate() {
//		    this.$nextTick(function(){
//
//		    })
//		},

  }

</script>

<style scoped>
	.ris_cont_headHint{
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
}

	 .ris_cont1{
            background: #fff;
        }
        .ris_p_button{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: none;
        }
        .ris_p_cont{
            /*width: 80%;*/
            margin: 15px auto;
        }
        /*左边*/
        .ris_p_cont_left{
            float: left;
            width: 40%;
        }
        .ris_p_cont_left_head{
            line-height: 44px;
            background-color: #a0a0a0;
            padding-left: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
        /*列表样式*/
        .ris_btn_cont_left_ul3{
            line-height: 32px;
            width: 100%;
            height: 583px;
            overflow-x: hidden;
            border: 1px solid #2578ad;
            border-top: 0;
            overflow-y: auto;
            background-color: #fff;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .ris_btn_cont_left_ul3 li{
            cursor: pointer;
            width: 100%;
        }
        .ris_btn_cont_left_ul3 li a{
            display: block;
            width: 100%;
            height: 100%;
            /*border-bottom: 1px solid #fff;*/
            opacity: 0.9;
        }
        .ris_btn_cont_left_ul3 li a:hover{
            opacity: 1.5;
        }
        .ris_btn_cont_left_ul3>li>a{
            padding-left: 30px;
            background-color: #fff;
            border-bottom: 1px solid #fff;
            color: #666;
            border-bottom: 1px solid #ddd;
            /*border-top: 1px solid #aaa;*/
        }
        /*a.ris_tm_cont_left_ul_active{*/
        /*color: #ffb53e !important;*/
        /*}*/
        /*中间*/
        .ris_p_cont_center{
            float: left;
            width: 20%;
            text-align: center;
        }
        .ris_p_cont_center button{
            margin-top: 150px;
            width: 70%;
            height: 40px;
            border: 0;
            border-radius: 18px;
            color: #fff;
            cursor: pointer;
            font-size: 26px;
            line-height: 40px;
            background: #32a2e2;
        }
        .ris_p_cont_center button:hover{
            background: #4f94cd;
        }


        /*右边*/
        .ris_p_cont_right{
            float: right;
            width: 40%;
        }
        .ris_p_cont_right_head{
            line-height: 44px;
            background-color: #a0a0a0;
            padding-left: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
        .ris_btn_cont_right_ul3{
            line-height: 32px;
            width: 100%;
            height: 583px;
            overflow-x: hidden;
            border: 1px solid #2578ad;
            border-top: 0;
            overflow-y: auto;
            background-color: #fff;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .ris_btn_cont_right_ul3 li{
            cursor: pointer;
            width: 100%;
        }
        .ris_btn_cont_right_ul3 li a{
            display: block;
            width: 100%;
            height: 100%;
            /*border-bottom: 1px solid #fff;*/
            opacity: 0.9;
        }
        .ris_btn_cont_right_ul3 li a:hover{
            opacity: 1.5;
        }
        .ris_btn_cont_right_ul3>li>a{
            padding-left: 30px;
            background-color: #fff;
            border-bottom: 1px solid #fff;
            color: #666;
            border-bottom: 1px solid #ddd;
            /*border-top: 1px solid #aaa;*/
        }
        .ris_btn_cont_left_ul_a_active{
            color: #fa0002 !important;
        }
        .ris_btn_cont_right_ul_a_active{
            color: #fa0002 !important;
        }
        .ris_cont_headHint_btn{
            display: inline-block;
            float: right;
            padding: 0 30px;
            cursor: pointer;
            font-size: 14px;
            color: #ffac0e;
        }
        .ris_cont_headHint_btn:hover{
            color: #ff0;
        }

</style>
